<template>
  <div class="resource-box">
    <div class="resource-main">
      <!-- <div class="resource-title">{{ info.title }}</div> -->
      <div class="resource-type">
        <resource-total :total-data="totalData" />
        <type-distribute :type-data="typeData" />
        <product-distribute :product-data="productData" />
      </div>
      <noun-explain />
      <name-standard />
      <system-field />
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, onBeforeMount, ref } from 'vue';
  import { useI18n } from '@common/locales';
  import ResourceTotal from '@/views/board-resource/components/resource-total.vue';
  import TypeDistribute from '@/views/board-resource/components/type-distribute.vue';
  import ProductDistribute from '@/views/board-resource/components/product-distribute.vue';
  import NounExplain from '@/views/board-resource/components/noun-explain.vue';
  import NameStandard from '@/views/board-resource/components/name-standard.vue';
  import SystemField from '@/views/board-resource/components/system-field.vue';
  import { GetResourceData } from '@/api';
  export default defineComponent({
    name: 'BoardResource',
    components: {
      ResourceTotal,
      TypeDistribute,
      ProductDistribute,
      NounExplain,
      NameStandard,
      SystemField,
    },
    setup() {
      const t = useI18n().t;
      let totalData = ref([]); //资源总数
      let typeData = ref([]); //类型分布
      let productData = ref([]); //产品发布
      const state = {
        info: {
          title: t('resourceBoard.title'),
        },
      };
      const methods = {
        initResourceData() {
          GetResourceData().then((res) => {
            if (res.success) {
              const resData = res.data;
              totalData.value = resData.userTableCount;
              typeData.value = resData.typeTableCount;
              productData.value = resData.productTableCount;
            }
          });
        },
      };
      onBeforeMount(() => {
        methods.initResourceData();
      });
      return {
        totalData,
        typeData,
        productData,
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .resource-box {
    width: 100%;
    overflow: auto !important;
    background-color: #f0f2f5;
    .resource-main {
      width: 100%;
      min-width: 1250px;
      overflow: auto !important;
      margin: 0 auto;
      padding: 20px;
      .resource-title {
        width: 100%;
        color: #3f3f3f;
        text-align: center;
        font-size: 36px;
        // font-family: 'PingFang SC, PingFang SC-Bold';
        font-weight: bold;
        padding: 30px 0 30px;
      }
      .resource-type {
        width: 100%;
        height: 370px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
